<div id="mail-index" data-view="mail/index">
<style type="text/css">
  .content{
  /*background-color:#F2F2F2;*/
}
.mailInfo{
  padding: 15px 10px 10px 12px;
  border-bottom: 1px #D1D1D1 solid;
  background-color: #FFFFFF;
}
.mailCont{
  color: #B1B4BB;
}
.progressBar{
  width: 100%;
  /*background-color: green;*/
  height: 10px;
  margin-top: 5px;
  border: 1px #8997B1 solid;
  border-radius: 2px;
  box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
}
.progressBarRate{
  width: 0%;
  height: 100%;
  max-width: 100%;
  background-color: green;
/*  transition:width 0.5s;
-moz-transition:width 0.5s; /* Firefox 4 */
/* -webkit-transition:width 0.5s; /* Safari and Chrome */
/* -o-transition:width 0.5s; /* Opera */*/
}
.mailModule{
  padding: 0px 10px;
  height: 57px;
  border-bottom: 1px #D1D1D1 solid;
  background-color: #FFFFFF;
  cursor: pointer;
  position: relative;
}
.moduleImg{
  width: 31px;
  height: 31px;
  vertical-align: middle;
}
.moduleName{
  color: #636A78;
  line-height: 57px;
}
.moduleRound{
  width: 36px;
  height: 20px;
  background: #B94326;
  border-radius: 20px;
  color: white;
  text-align: center;
  font-size: 14px;
  min-width: 33px;
  line-height: 20px;
  display: none;
}
.hbox{
  /*background-color: #EEEEEF !important;*/
  -webkit-box-shadow: 0 0 1px #D5D5D5;
  height: 46px;
}
.footImg{
  height: 23px;
  margin-top: 13px;
  vertical-align: bottom;
}
.used{
  padding-left: 10px;
}
.rightIcon{
  right: 10px;
  top: 40%;
  color: #959595;
  font-size: 10px;
  position: absolute;
}
.flex1 span{
color: #747B87;
}
.flex1 a{
  color: #747B87;
}
#wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
/* Prevent native touch events on Windows */
-ms-touch-action: none;
/* Prevent the callout on tap-hold and text selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* Prevent text resize on orientation change, useful for web-apps */
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
#scroller {
position: absolute;
width: 100%;
height: 100%
/* Prevent elements to be highlighted on tap */
-webkit-tap-highlight-color: rgba(0,0,0,0);
/* Put the scroller into the HW Compositing layer right from the start */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.sendMailStyle{
  /*padding-left: 2px;*/
  display: inline-block;
  padding-bottom: 2px;
}
.blue-bar{
  background-color: #274E96;
  height: 48px;
  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1);
}
.blue-bar a{
  color: #fff;
}
.blue-bar h1{
  color: #fff;
  font-family: Arial,Serif;
}



.pull-center{text-align: center;}


.fontFamily{
   font-family:Arial,Serif;
}
.title{
  height: 100%;
  line-height: 48px;
}


</style>
<header class="bar bar-nav ">
  <a class="icon icon-left-nav pull-left" data-action="back"></a>
  <h1 class="title">邮件</h1>
</header>
  <div id="table-view-cell toolbar-normal" class="bar bar-standard  bar-footer pull-center hbox"> 
      <p class="flex1 sendMail">
      <img src="../mail/img/sendmail.png" alt="" class="footImg">
      <span class="sendMailStyle"><!-- <a href="#mail/sendMail.html"> -->写邮件<!-- </a> --></span>
      </p>
  </div>
  <div class="content">
    <div id="wrapper">
      <div id="scroller">
        <div class="mailModule" >
        <img src="../mail/img/shoujianxiang.png" alt="" class="moduleImg">
        <span class="moduleName">收件箱</span>
        <span class="moduleRound fontFamily inbox badge">63</span>
        <span class="icon icon-right-nav rightIcon"></span>
       <div id="inbox"></div>
        </div>
        <div class="mailModule" id="outbox">
        <img src="../mail/img/fajianxiang.png" alt="" class="moduleImg">
        <span class="moduleName">发件箱</span>
        <span class="moduleRound fontFamily outbox"></span>
        <span class="icon icon-right-nav rightIcon"></span>
        </div>
        <div class="mailModule" id="draftBox">
        <img src="../mail/img/caogao.png" alt="" class="moduleImg">
        <span class="moduleName">草稿</span>
        <span class="moduleRound fontFamily draftBox"></span>
        <span class="icon icon-right-nav rightIcon"></span>
        </div>
        <div class="mailModule" id="wasteBox">
        <img src="../mail/img/huishouzhan.png" alt="" class="moduleImg">
        <span class="moduleName">回收站</span>
        <span class="moduleRound fontFamily wasteBox"></span>
        <span class="icon icon-right-nav rightIcon"></span>
        </div>
        <div class="mailInfo">
        <span class="mailCont">邮箱已使用
        <span class="used fontFamily">59.9M/100M</span>
        <span class="total fontFamily"></span>
        </span>
        <div class="progressBar">
        <div class="progressBarRate" style="width:59.9%">
        </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</div>
